<template>
	<div class="page">
		<div class="mavon-pnl" :class="'module-'+ state" v-show="!isPrint">
			<mavon-editor v-model="content"
				class="md"
				ref="md"
				_props="props"
				:subfield="subfield"
				:editable="true"
				:ishljs="true"
				:toolbars-flag="true"
				:defaultOpen="defaultOpen"
				:toolbars="toolbars"
				:config="configs"
				@imgAdd="onImgAdd"
				@change="onChange"
				@previewToggle="onPreviewToggle"
				@subfieldToggle="onSubfieldToggle"
				@save="onSave"
				_externalLink="externalLink">
				<template slot="left-toolbar-before">
					<button
						type="button"
						@click="onOpen"
						class="iconfont icon-wenjianjiadakai"
						aria-hidden="true"
						title="打开文件(Alt+O)">
					</button>
					<button
						type="button"
						@click="onViewCol"
						class="iconfont icon-qiehuan"
						aria-hidden="true"
						title="模式转换(Alt+W)">
					</button>
					<button
						v-if="state != 1"
						type="button"
						@click="onEdit"
						class="iconfont icon-bianji"
						aria-hidden="true"
						title="编辑文件(Alt+E)">
					</button>
					<button
						v-if="state != 2"
						type="button"
						@click="onView"
						class="iconfont icon-liulan"
						aria-hidden="true"
						title="浏览文件(Alt+V)">
					</button>
					<div class="hr"></div>
				</template>
				<template slot="left-toolbar-after">
					<button
						type="button"
						@click="onSaveAs"
						class="iconfont icon-baocun"
						aria-hidden="true"
						title="另存文件(Alt+S)">
					</button>
					<button
						_if="state == 2"
						type="button"
						@click="onPrint"
						class="iconfont icon-dayin"
						aria-hidden="true"
						title="打印(Alt+P)">
					</button>
					<button ref="printBtn" v-show="false" v-print="'#printMe'">隐藏打印</button>
					<button
						type="button"
						@click="onAbout"
						class="iconfont icon-zhuyi"
						aria-hidden="true"
						title="关于(Alt+M)">
					</button>
				</template>
			</mavon-editor>
		</div>
		<div v-if="showAbout" class="dialog-pnl">
			<div class="shade" @click="aboutClose"></div>
			<div class="dialog">
				<div class="head not-select">
					<span class="title">关于</span>
					<span class="close iconfont icon-cuowu-fill" @click="aboutClose"></span>
				</div>
				<div class="center">
					<div class="title">
						<p class="name">GMarkdown</p>
						<p class="varsion">version: 0.0.1</p>
					</div>
					<div class="row">
						<span class="not-select">软件作者：</span>
						<span>黄新变</span>
					</div>
					<div class="row">
						<span class="not-select">联系电话：</span>
						<span>15077120431</span>
					</div>
					<div class="row">
						<span class="not-select">联系邮箱：</span>
						<span>359664529@qq.com</span>
					</div>
					<div class="row">
						<span class="not-select">友情赞助：</span>
						<img :src="weichatImg">
					</div>
				</div>
				<div class="bottom not-select">
					<button ref="aboutBtn" class="btn" @click="aboutClose">关闭</button>
				</div>
			</div>
		</div>
		<div v-if="showMsg" class="dialog-pnl">
			<div class="shade" @click="msgClose"></div>
			<div class="dialog">
				<div class="head not-select">
					<span class="title">{{msg.sTitle}}</span>
					<span class="close iconfont icon-cuowu-fill" @click="msgClose"></span>
				</div>
				<div class="center">
					<span class="msg">{{msg.sMsg}}</span>
				</div>
				<div class="bottom not-select">
					<button ref="msgBtn" class="btn" @click="msgClose">确定</button>
				</div>
			</div>
		</div>
		<div id="printMe" v-show="isPrint">
			<mavon-editor
				ref="mdPrint"
				v-model="printHtml"
				:editable="false"
				:ishljs="true"
				defaultOpen="preview"
				:shortCut="false"
				:subfield="false"
				@change="mdPrintChange"
				box-shadow-style="0 0 0 0 rgba(0,0,0,0)"
				:toolbars-flag="false"/>
		</div>
	</div>
</template>

<script>
	import "mavon-editor/dist/css/index.css"

	import "highlight.js/styles/googlecode.css"
	//import hljs from "highlight.js" //导入代码高亮文件

	export default {
		data() {
			return {
				isPrint: false,
				showAbout: false,
				showMsg: false,
				msg: {
					sTitle: "提示",
					sMsg: ""
				},
				nowFile: "",
				content: "",
				contentOld: "",
				printHtml: "",
				configs: {},
				state: 3,//1:edit;2:view;3:endAndView
				defaultOpen: "edit",
				subfield: true,
				externalLink: {
					markdown_css: function() {
						// 这是你的markdown css文件路径
						return "/mavon-editor/markdown/github-markdown.min.css";
					},
					hljs_js: function() {
						// 这是你的hljs文件路径
						return "/mavon-editor/highlightjs/highlight.min.js";
					},
					hljs_css: function(css) {
						// 这是你的代码高亮配色文件路径
						return "/mavon-editor/highlightjs/styles/" + css + ".min.css";
					},
					hljs_lang: function(lang) {
						// 这是你的代码高亮语言解析路径
						return "/mavon-editor/highlightjs/languages/" + lang + ".min.js";
					},
					katex_css: function() {
						// 这是你的katex配色方案路径路径
						return "/mavon-editor/katex/katex.min.css";
					},
					katex_js: function() {
						// 这是你的katex.js路径
						return "/mavon-editor/katex/katex.min.js";
					},
				},
				toolbars: {},
				viewToolbars: {
					readmodel: true, // 沉浸式阅读
					help: true, // 帮助
					navigation: true, // 导航目录
				},
				editToolbars: {
					bold: true, // 粗体
					italic: true, // 斜体
					header: true, // 标题
					underline: true, // 下划线
					strikethrough: true, // 中划线
					mark: true, // 标记
					superscript: true, // 上角标
					subscript: true, // 下角标
					quote: true, // 引用
					ol: true, // 有序列表
					ul: true, // 无序列表
					link: true, // 链接
					imagelink: true, // 图片链接
					code: true, // code
					table: true, // 表格
					fullscreen: false, // 全屏编辑
					/* 1.3.5 */
					undo: true, // 上一步
					redo: true, // 下一步
					trash: true, // 清空
					save: true, // 保存（触发events中的save事件）
					/* 1.4.2 */
					navigation: false, // 导航目录
					/* 2.1.8 */
					alignleft: true, // 左对齐
					aligncenter: true, // 居中
					alignright: true, // 右对齐
					readmodel: false, // 沉浸式阅读
					htmlcode: false, // 展示html源码
					help: false, // 帮助
					subfield: false, // 单双栏模式
					preview: false, // 预览
				},
				resizeObserver: null,
				observer: null,
				lineDivs: [],
				weichatImg: ""
			}
		},
		methods: {
			init() {
				//this.changeState(3);
				this.loadInitFile();
			},
			
			loadInitFile() {
				if (!this.go.ReadNowFile) {
					return;
				}
				
				this.go.ReadNowFile().then((res)=>{
					if (!res.success) {
						this.changeState(3);
						return;
					}
					
					this.changeState(2);
					this.nowFile = res.msg;
					this.content = res.data;
					
					if ((this.content != "") && (this.content.includes("```"))) {
						this.$nextTick(() => {
							const timer = setTimeout(() => {
								this.addLineNumber(this.$refs.md.$el);
								this.addEditLineNumber(this.$refs.md.$el);
								clearTimeout(timer);
							}, 3000);
						});
					}
				});
			},
			
			onOpen() {
				this.go.OpenFile(this.getFilePath(this.nowFile)).then((res) => {
					if (!res.success) {
						if (res.msg == "文件路径为空") {
							return;
						}
						this.onMsg("错误", res.msg);
						//this.content = res.msg;
						return;
					}
					
					this.nowFile = res.msg;
					this.$nextTick(() => {
						this.content = res.data;
					});
					
					this.$nextTick(() => {
						this.changeState(2);
					});
				});
			},
			
			onEdit() {
				this.changeState(1);
			},
			
			onView() {
				this.changeState(2);
			},
			
			onViewCol() {
				let temp = this.state +1;//1:edit;2:view;3:endAndView
				if (temp > 3) {
					temp = 1;
				}
				
				this.changeState(temp);
			},
			
			changeState(iState) {
				this.state = iState;
				
				switch (this.state){
					case 1:
						this.defaultOpen = "edit";
						this.toolbars = this.editToolbars;
						this.subfield = false;
						break;
					case 2:
						this.defaultOpen = "preview";
						this.toolbars = this.viewToolbars;
						this.subfield = false;
						break;
					case 3:
						this.defaultOpen = "preview";
						this.toolbars = this.editToolbars;
						this.subfield = true;
						break;
					default:
						break;
				}
				
				this.$nextTick(() => {
					this.addLineNumber(this.$refs.md.$el);
					this.addEditLineNumber(this.$refs.md.$el);
				});
			},

			/**
			 * 保存
			 */
			onSave() {
				this.go.SaveFile(this.nowFile, this.content).then((res) => {
					if (!res.success) {
						this.onMsg("错误", res.msg);
						// this.go.ErrorMsg("错误", res.msg);
						return;
					}
					
					//this.content = res.data;//返回的是路径
				});
			},
			
			// 内容改变事件
			onChange(value, render) {
				this.$nextTick(() => {
					this.addEditLineNumber(this.$refs.md.$el);
					this.addLineNumber(this.$refs.md.$el);
				});
				// this.sTitle = this.sTitle.trim();
				// if (this.sTitle != "") {
				// 	return;
				// }
				
				// let temp = value.trim();
				// if (temp == "") {
				// 	return;
				// }
				
				// let iEd = temp.indexOf("\n");
				// temp = temp.substring(0, iEd).trim();
				
				// while(temp.indexOf("#") == 0) {
				// 	temp = temp.substring(1).trim();
				// }
				
				// this.sTitle = temp;
			},
			
			onPreviewToggle(status, value) {
				this.$nextTick(() => {
					this.addLineNumber(this.$refs.md.$el);
				});
			},
			
			onSubfieldToggle(status, value) {
				this.$nextTick(() => {
					this.addLineNumber(this.$refs.md.$el);
				});
			},
			
			/**
			 * 另存
			 */
			onSaveAs() {
				this.go.SaveAsFile(this.getFilePath(this.nowFile), this.content).then((res) => {
					if (!res.success) {
						if (res.data == 8001) {
							return;
						}
						
						if (res.msg.includes("The system cannot find the file specified")) {
							return;
						}
						
						this.onMsg("错误", res.msg);
						//this.go.ErrorMsg("错误", res.msg);
						//this.content = res.msg;
						return;
					}
					
					this.nowFile = res.data;//返回的是路径
				});
			},
			
			onImgAdd(pos, $file) {
				this.$refs.md.$img2Url(pos, $file.miniurl);//不使用图床的做法
				return;
			},
			
			getFilePath(path) {
				let result = path;
				if (result == "") {
					return result;
				}
				
				result = result.replace(/\\/g,"/");
				let i = result.lastIndexOf("/");
				if (i < 0) {
					return "";
				}
				
				result = result.substring(0, i);
				
				return result;
			},
			
			onAbout() {
				this.showAbout = true;
				this.$nextTick(() => {
					this.$refs.aboutBtn.focus();
				});
			},
			
			aboutClose() {
				this.showAbout = false;
				this.$nextTick(() => {
					this.$refs.md.focus();
				});
			},
			
			onPrint() {
				//this.go.WindowPrint();//只能打印窗口
				//this.printHtml = this.content + "\r\n<br /><br /><br /><br /><br /><br />";//补偿缺失的行
				if (this.printHtml != this.content) {
					this.printHtml = this.content;
					this.$nextTick(()=>{//这行不能少
						this.addLineNumberToPrint(this.$refs.mdPrint.$el);//这个方式行号会有问题,行号必须使用 position: absolute;来进行布局,否则会乱
					});
				}
				
				this.isPrint = true;
				
				this.$nextTick(()=>{
					const btn = this.$refs.printBtn;//this.$refs.printBtn.$el
					btn.click();//异步方式
					this.isPrint = false;
					
					//这个方式行号没问题,但分页有问题
					//this.addLineNumberToPrint(this.$refs.mdPrint.$el);
					// this.$nextTick(()=>{
					// 	window.print();//会进入等待
					// 	this.isPrint = false;
					// })
				});
			},
			
			mdPrintChange() {
				// this.$nextTick(() => {
				// 	this.addLineNumber(this.$refs.mdPrint.$el);
				// });
				// if (this.printHtml == "") {
				// 	return;
				// }
			},
			
			onMsg(sTitle, sMsg) {
				this.msg = {
					sTitle: sTitle,
					sMsg: sMsg
				};
				
				this.showMsg = true;
				this.$nextTick(() => {
					this.$refs.msgBtn.focus();
				});
			},
			
			msgClose() {
				this.showMsg = false;
				this.$nextTick(() => {
					this.$refs.md.focus();
				});
			},
			
			/**
			 * 添加代码行号
			 */
			addLineNumber(mdElement) {
				if ((this.content == "") || (!this.content.includes("```"))) {
					return;
				}
				
				const hljsList = mdElement.querySelectorAll(".v-note-show pre .hljs");
				if (!hljsList) {
					return;
				}
				
				for (let k = 0; k < hljsList.length; k++) {
					const codeDiv = hljsList[k].firstChild;
					
					let lineDiv = hljsList[k].querySelector(".line-div")
					if (!lineDiv) {
						lineDiv = document.createElement("div");
						lineDiv.className = "line-div";
						hljsList[k].insertBefore(lineDiv, codeDiv);
						
						this.observeElementRemoval(lineDiv);//加入监听
						let resizeObserver = new ResizeObserver((entries) => {
							this.addLineNumber2(lineDiv);
						});
						resizeObserver.observe(lineDiv);
						
						let has = false;
						for (let i = 0; i < this.lineDivs.length; i++) {
							if (this.lineDivs[i].id == lineDiv) {
								has = true;
								break;
							}
						}
						
						if (!has) {
							this.lineDivs.push({id: lineDiv, resizeObj: resizeObserver});
						}
					}
				}
			},
			
			addLineNumber2(lineDiv) {
				this.$nextTick(()=>{
					let iSum = Math.round(lineDiv.offsetHeight / parseFloat(getComputedStyle(lineDiv).lineHeight));
					
					let temp = "";
					for (let i = 0; i < iSum ; i++) {
						temp = temp + "<p>" + (i + 1) + "</p>";
					}
					
					lineDiv.innerHTML = temp;
				})
			},
			
			/**
			 * 添加代码行号
			 */
			addLineNumberToPrint(mdElement) {
				const hljsList = mdElement.querySelectorAll(".v-note-show pre .hljs");
				if (!hljsList) {
					return;
				}
				
				for (let k = 0; k < hljsList.length; k++) {
					const codeDiv = hljsList[k].firstChild;
					
					let lineDiv = hljsList[k].querySelector(".line-div")
					if (!lineDiv) {
						lineDiv = document.createElement("div");
						lineDiv.className = "line-div";
						hljsList[k].insertBefore(lineDiv, codeDiv);
						
						this.addLineNumber2(lineDiv);
					}
				}
			},

			/**
			 * 添加编辑区行号
			 */
			addEditLineNumber(mdElement) {
				if (this.content == "") {
					return;
				}
				
				const contentInput = mdElement.querySelector(".v-note-edit .content-input-wrapper .content-input");
				if (!contentInput) {
					return;
				}
				
				const textarea = contentInput.querySelector("textarea");
				
				let lineDiv = contentInput.querySelector(".edit-line-div")
				if (!lineDiv) {
					lineDiv = document.createElement("div");
					lineDiv.className = "edit-line-div";
					//contentInput.insertBefore(lineDiv, codeDiv);
					contentInput.appendChild(lineDiv);
				}

				lineDiv.style.height = textarea.offsetHeight + "px";
				
				this.$nextTick(()=>{
					//const iSum = Math.round(lineDiv.offsetHeight / parseFloat(getComputedStyle(lineDiv).lineHeight));
					const iSum = textarea.value.split(/\r\n|\n/).length;

					let temp = "";
					for (let i = 0; i < iSum ; i++) {
						temp = temp + "<p>" + (i + 1) + "</p>";
					}
					
					lineDiv.innerHTML = temp;
					//--设置宽度--//
					let iWidth = (iSum + "").length * 14 + 4;
					lineDiv.style.width = iWidth + "px";

					let iMarginLeft = iWidth - 25;//25是本身框体左边距
					textarea.style.marginLeft = (iMarginLeft > 0 ? iMarginLeft : 0) + "px";//如果行宽未超出偏移值,则保持不变
				});
			},
			
			observeElementRemoval(lineDiv) {
				this.observer = new MutationObserver((mutationsList) => {
					mutationsList.forEach(mutation => {
						if ((mutation.type == 'childList') && (mutation.target == lineDiv) && (mutation.removedNodes.length > 0)) {
							//console.log('元素已被移除');

							for (let i = this.lineDivs.length -1; i >= 0; i--) {
								if (mutation.target == this.lineDivs[i].id) {
									this.lineDivs[i].resizeObj.unobserve(mutation.target);//结束对指定 Element 的监听。
									this.lineDivs[i].resizeObj.disconnect(this.lineDivs[0]);//取消特定观察者目标上所有对 Element 的监听
									this.lineDivs[i].id = null;
									this.lineDivs[i].resizeObj = null;
									this.lineDivs.splice(i, 1);
								}
								
								//this.resizeObserver.unobserve(this.lineDivs[0]);//结束对指定 Element 的监听。
								//this.resizeObserver.disconnect(this.lineDivs[0]);//取消特定观察者目标上所有对 Element 的监听
							}
						}
					});
				});
			  
				// 开始观察lineDiv的子节点变化
				this.observer.observe(lineDiv, { childList: true });
			},
			
			// onTest() {
			// 	this.msg = {
			// 		sTitle: "错误",
			// 		sMsg: "aaaaaaaaaaaaaaaaa"
			// 	};
				
			// 	this.showMsg = true;
			// },
			
			/**
			 * 快捷键事件
			 * @param {Object} event
			 */
			keyFunc(event) {
				let shortcutEvent = [				//快捷键对应的事件
					{key: "P", alt: true, fun: this.onPrint},
					{key: "E", alt: true, fun: this.onEdit},
					{key: "V", alt: true, fun: this.onView},
					{key: "W", alt: true, fun: this.onViewCol},
					{key: "S", alt: true, fun: this.onSaveAs},
					{key: "O", alt: true, fun: this.onOpen},
					{key: "M", alt: true, fun: this.onAbout}
				];
				
				this.keyDown(event, shortcutEvent);
			}
		},
		
		/**
		 * 加载后执行
		 */
		mounted() {
			this.init();
			window.addEventListener("keydown", this.keyFunc);
			window.addEventListener("keyup", this.keyup);
			
			this.resizeObserver = new ResizeObserver((entries) => {
				for (let i = 0; i < this.lineDivs.length; i++) {
					this.addLineNumber2(this.lineDivs[0]);//this.addLineNumber2(lineDiv)
				}
			});
		},
		
		//--释放前执行--//
		beforeDestroy() {
			//手动销毁监听
			window.removeEventListener("keydown", this.keyFunc);
			window.removeEventListener("keyup", this.keyup);
			//observer.disconnect();
			
			if (this.observer) {
				this.observer.disconnect();
			}
			
			for (let i = this.lineDivs.length -1; i >= 0; i--) {
				this.lineDivs[i].resizeObj.unobserve(this.lineDivs[i].id);//结束对指定 Element 的监听。
				this.resizeObserver.disconnect(this.lineDivs[i].id);//取消特定观察者目标上所有对 Element 的监听
			}
			
			this.lineDivs = [];
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.page {
		width: 100%;
		height: 100%;
		/* overflow: hidden; */
		background-color: #FFFFFF;
	}

	.page>.mavon-pnl {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.page>.mavon-pnl>.markdown-body.md {
		width: 100%;
		height: 100%;
	}
	
	.v-note-op button.iconfont {
		border: 0px;
		background-color: #ffffff;
		font-size: 13px;
		margin: 6px 0 5px 0px;
		font-size: 14px;
		padding: 4.5px 6px 5px 3.5px;
		line-height: 1;
		border-radius: 5px;
		box-sizing: border-box;
		display: inline-block;
		cursor: pointer;
		height: 28px;
		width: 28px;
	}
	
	.v-note-op button.iconfont:hover {
		background-color: #eaeaea;
	}
	
	.v-note-op div.hr{
		border-left: 1px solid #e5e5e5;
		display: inline;
		line-height: 28px;
	}
	
	.dialog-pnl {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
		z-index: 9999;
	}
	
	.dialog-pnl>.shade {
		height: 100%;
		width: 100%;
		z-index: 9998;
		background-color: #00000080;
	}
	
	.dialog-pnl>.dialog {
		position: absolute;
		top: 40%;
		left: 50%;
		width: 400px; 
		transform: translate(-50%, -50%);
		background-color: #fff;
		z-index: 9999;
		border-radius: 10px;
	}
	
	.dialog-pnl>.dialog>.head {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.dialog-pnl>.dialog>.head>.title {
		padding: 0 10px 0 20px;
		font-weight: 600;
	}
	
	.dialog-pnl>.dialog>.head>.close {
		padding-right: 10px;
		cursor: pointer;
	}
	
	.dialog-pnl>.dialog>.head>.close:hover {
		font-weight: 600;
		color: #F44336;
	}
	
	.dialog-pnl>.dialog>.center {
		width: 100%;
		min-width: 250px;
		min-height: 100px;
		padding: 10px 10px;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #e2e0e0;
	}
	
	.dialog-pnl>.dialog>.center>.title {
		width: 100%;
		text-align: center;
	}
	
	.dialog-pnl>.dialog>.center>.title>.name {
		width: 100%;
		font-size: 18px;
		font-weight: 700;
		margin-top: 4px;
		margin-bottom: 0px;
	}
	
	.dialog-pnl>.dialog>.center>.title>.varsion {
		width: 100%;
		font-size: 14px;
		margin-top: 1px;
	}
	
	.dialog-pnl>.dialog>.center>.row {
		width: 70%;
		display: inline-flex;
		justify-content: flex-start;
		padding: 4px 0px 4px 10px;
	}
	
	.dialog-pnl>.dialog>.center>.msg {
		width: 70%;
		height: 60px;/*控制div的高度*/
		box-sizing: border-box;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 3;/*控制文字行数*/
		word-break: break-all;
		text-overflow: ellipsis;
		overflow-y: hidden;
	}
	
	.dialog-pnl>.dialog>.bottom {
		width: 100%;
		height: 60px;
		padding: 5px;
		box-sizing: border-box;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	
	.dialog-pnl>.dialog>.bottom>.btn {
		margin: 0 5px;
		height: 36px;
		width: 76px;
		cursor: pointer;
	}

	.page>.mavon-pnl.module-1>>>.v-right-item.transition,
	.page>.mavon-pnl.module-3>>>.v-right-item.transition {
		display: none;
	}
	
	.page>.mavon-pnl>>>.v-note-edit .content-input-wrapper  {
		/* padding: 0px 25px 15px 0px !important; */
	}
	
	.page>.mavon-pnl>>>.v-note-edit .content-input-wrapper .content-input {
		position: relative;
	}
	
	.page>.mavon-pnl>>>.v-note-edit textarea {
		white-space: nowrap;
		padding-left: 10px;
		margin-left: 20px;
	}
	
	.page>.mavon-pnl>>>.v-note-edit .content-input-wrapper .edit-line-div {
		position: absolute;
		top: 0;
		left: -25px;
		width: 40px;
		height: 100%;
		padding-top: 0em;
		padding-bottom: .2em;
		margin: 0 10px 0 0;
		
		/* background-color: #dcdfe6; */
		box-sizing: border-box;
		overflow-y: clip;
		border-right: 1px solid #607D8B;
		text-align: right;
		
		-webkit-user-select: none;/*webkit浏览器*/ 
		-moz-user-select: none;/*火狐*/ 
		-ms-user-select: none;/*IE10*/ 
		user-select: none;
		color: #F44336;
	}
	
	.page>.mavon-pnl>>>.v-note-edit .content-input-wrapper .edit-line-div>p {
		width: 100%;
		text-align: right;
		margin: 0;
		padding-right: 8px;
		font-size: inherit;
		line-height: inherit;
	}
	
	.page>.mavon-pnl>>>.v-note-show pre>.hljs {
		display: flex;
	}
	
	.page>.mavon-pnl>>>.v-note-show pre>.hljs .line-div {
		width: 40px;
		height: auto;
		padding-top: .2em;
		padding-bottom: .2em;
		margin: 0 10px 0 0;
		font-size: 85%;
		background-color: #dcdfe6;
		box-sizing: border-box;
		overflow-y: clip;
		border-right: 1px solid #607D8B;
		
		-webkit-user-select: none;/*webkit浏览器*/ 
		-moz-user-select: none;/*火狐*/ 
		-ms-user-select: none;/*IE10*/ 
		user-select: none;
	}
	
	.page>.mavon-pnl>>>.v-note-show pre {
		padding: 0px !important;
	}
	
	.page>.mavon-pnl>>>.v-note-show pre>.hljs .line-div>p {
		width: 40px;
		text-align: right;
		margin: 0;
		padding-right: 8px;
		line-height: inherit;
	}
	
	#printMe>>>.v-note-show pre {
		padding: 0px !important;
	}
	
	#printMe>>>.v-note-show pre>.hljs {
		position: relative;
		padding-left: 50px;
	}
	
	#printMe>>>.v-note-show pre>.hljs .line-div {
		position: absolute;
		top: 0;
		left: 0;
		width: 40px;
		height: 100%;
		padding-top: .2em;
		padding-bottom: .2em;
		margin: 0;
		font-size: 85%;
		background-color: #dcdfe6;
		box-sizing: border-box;
		border-right: 1px solid #607D8B;
		overflow-y: clip;
		
		-webkit-user-select: none;/*webkit浏览器*/ 
		-moz-user-select: none;/*火狐*/ 
		-ms-user-select: none;/*IE10*/ 
		user-select: none;
		
		line-height: 1.7;
	}
	
	#printMe>>>.v-note-show pre>.hljs .line-div>p {
		width: 40px;
		text-align: right;
		margin: 0;
		padding-right: 8px;
		line-height: inherit;
	}
	
	@page {
		size: auto;
		/* margin: 0mm; */ /* 页边距 */
	}

	.markdown-body {
		tab-size: 4; /* \t长度 或者使用 '4em' 如果需要更精确的控制 */
	}

</style>